<template>
  <div class="container">
    <card title="贷款推送">
      <button class="button is-primary" slot="right" @click="toFuture">期货推送</button>
      <transition-group class="head" type="transition" name="h-fade">
        <form-item label="App" key="app">
          <el-select v-model="source_app" placeholder="请选择App">
            <el-option
              v-for="item in apps"
              :key="item.source_app"
              :label="item.app_name"
              :value="item.source_app">
            </el-option>
          </el-select>
        </form-item>
        <form-item label="推送类型" key="type">
          <el-select v-model="type" placeholder="请选择推送类型">
            <el-option
              v-for="(item, key) in options"
              :key="key"
              :label="item"
              :value="key">
            </el-option>
          </el-select>
        </form-item>
        <form-item label="用户ID" key="some" v-if="type === 'some'">
          <textarea class="textarea" placeholder="多个ID用','隔开" v-model="tId"></textarea>
        </form-item>
        <form-item label="时间" key="time" v-if="type === 'time'">
          <el-date-picker
            v-model="time"
            type="daterange"
            :clearable="false"
            :picker-options="pickerOptions"
            placeholder="选择日期范围">
          </el-date-picker>
        </form-item>
        <form-item label="推送内容" key="content" class="test">
          <textarea class="textarea" placeholder="请输入您想推送的内容" v-model="content"></textarea>
        </form-item>
        <div class="button-box form-item test" key="button">
          <button class="button is-primary" :class="{'is-loading': isPushing}" @click="submit">提交</button>
        </div>
      </transition-group>
    </card>
  </div>
</template>

<script>
import { FormItem } from '@/components/Common'
import { mapGetters } from 'vuex'
export default {
  name: 'push',
  components: {
    FormItem
  },
  created () {
    this.$api.get('assistant/opening?param=push').then(req => {
      this.apps = req || []
      if (this.apps.length > 0) {
        this.source_app = this.apps[0].source_app
      }
    })
  },
  computed: {
    ...mapGetters({
      string: 'global/string'
    }),
    tId: {
      get () {
        return this.ids.join(',')
      },
      set (val) {
        this.ids = val.split(',')
      }
    },
    time: { // 时间控件里的值
      get () {
        return [this.startTime, this.endTime]
      },
      set (val) {
        if (val === '' || val.length !== 2) return
        this.startTime = this.$dateFormat('yyyy-MM-dd', new Date(val[0]))
        this.endTime = this.$dateFormat('yyyy-MM-dd', new Date(val[1]))
        this.getData()
      }
    }
  },
  data () {
    let startTime = this.$dateFormat('yyyy-MM', new Date()) + '-01'
    let endTime = this.$dateFormat('yyyy-MM-dd', new Date())
    return {
      isPushing: false,
      startTime,
      endTime,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() >= Date.now()
        }
      },
      source_app: '',
      apps: [],
      type: 'all',
      ids: [],
      content: '',
      options: {
        all: '全部用户',
        some: '指定用户',
        time: '指定日期'
      }
    }
  },
  methods: {
    toFuture () {
      this.$router.push('/futurePush')
    },
    submit () {
      if (this.content === '') {
        this.$openMessage({message: '请输入推送内容'})
        return
      }
      let param = {
        source_app: this.source_app,
        content: this.content
      }
      if (this.type === 'some') {
        // 过滤掉非数字的字符 并把过滤掉后的结果转化为数字
        // let idfas = this.ids.filter(item => item !== '')
        let ids = Array.from(this.ids.filter(item => item !== '' && !isNaN(item)), item => parseInt(item))
        param.user_ids = ids
      }
      if (this.type === 'time') {
        param.start_date = this.startTime
        param.end_date = this.endTime
      }

      this.isPushing = true
      this.$api.post('jpush', param).then(req => {
        this.isPushing = false
        this.$openMessage({message: '推送成功', type: 'success'})
      }).catch(() => {
        this.isPushing = false
        this.$openMessage({message: '推送失败'})
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.head{
  padding: 20px;
}
.button-box{
  display: flex;
  justify-content: center;
}
.test {
  transition: transform 0.5s;
}
</style>

